import React, { memo } from 'react'
// 引入类型：
import type { ReactNode } from 'react'
import { NavLink } from 'react-router-dom'
import { DiscoverTabWrapper } from './style'
import { discoverTabData } from '../../../../assets/data/local-data'

interface IProps {
	children?: ReactNode
}

// 对组件进行类型定义，FC 表示函数式组件（即：FunctionComponents）
const DiscoverTab: React.FC<IProps> = () => {
	return (
		<DiscoverTabWrapper>
			<div className="discoverTab">
				<div className="tabItem">
					{discoverTabData.map((item: any) => {
						return (
							<NavLink className="itemLink" to={item.link} key={item.link}>
								{item.name}
							</NavLink>
						)
					})}
				</div>
			</div>
		</DiscoverTabWrapper>
	)
}

export default memo(DiscoverTab)
